<template>
  <div class="app-container">
    <div class="page-header">
      <h2>首页文本管理</h2>
      <p>iOS应用首页文本配置管理</p>
    </div>

    <div class="content-area">
      <el-card>
        <div slot="header" class="card-header">
          <span>文本列表</span>
          <el-button type="primary" size="small" @click="handleAdd">
            <i class="el-icon-plus" /> 添加文本
          </el-button>
        </div>

        <el-table
          v-loading="loading"
          :data="textList"
          style="width: 100%"
          border
        >
          <el-table-column type="index" label="序号" width="80" align="center" />

          <el-table-column prop="title" label="标题" min-width="300">
            <template slot-scope="scope">
              {{ scope.row.title }}
            </template>
          </el-table-column>

          <el-table-column label="操作" width="200" fixed="right" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-edit"
                @click="handleEdit(scope.row)"
              >
                编辑
              </el-button>
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>

    <!-- 编辑/新增对话框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="600px"
      :close-on-click-modal="false"
    >
      <el-form
        ref="textForm"
        :model="formData"
        :rules="formRules"
        label-width="100px"
      >
        <el-form-item label="标题" prop="title">
          <el-input
            v-model="formData.title"
            placeholder="请输入标题"
            maxlength="200"
            show-word-limit
            type="textarea"
            :rows="4"
          />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button :loading="submitting" type="primary" @click="handleSubmit">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getApplePageList, saveApplePage, deleteApplePage } from '@/api/iosManagement'

export default {
  name: 'IndexTxt',
  data() {
    return {
      loading: false,
      submitting: false,
      textList: [],
      dialogVisible: false,
      dialogTitle: '添加文本',
      formData: {
        id: null,
        title: ''
      },
      formRules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          { max: 200, message: '标题长度不能超过200个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.fetchList()
  },
  methods: {
    // 获取列表
    async fetchList() {
      this.loading = true
      try {
        const res = await getApplePageList()
        this.textList = res.data || []
      } catch (error) {
        console.error('获取列表失败:', error)
        this.$message.error('获取列表失败')
      } finally {
        this.loading = false
      }
    },

    // 添加
    handleAdd() {
      this.dialogTitle = '添加文本'
      this.formData = {
        id: null,
        title: ''
      }
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.textForm && this.$refs.textForm.clearValidate()
      })
    },

    // 编辑
    handleEdit(row) {
      this.dialogTitle = '编辑文本'
      this.formData = {
        id: row.id,
        title: row.title
      }
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.textForm && this.$refs.textForm.clearValidate()
      })
    },

    // 提交
    async handleSubmit() {
      this.$refs.textForm.validate(async(valid) => {
        if (!valid) return

        this.submitting = true
        try {
          await saveApplePage(this.formData)
          this.$message.success(this.formData.id ? '修改成功' : '添加成功')
          this.dialogVisible = false
          this.fetchList()
        } catch (error) {
          console.error('保存失败:', error)
          this.$message.error('保存失败')
        } finally {
          this.submitting = false
        }
      })
    },

    // 取消
    handleCancel() {
      this.dialogVisible = false
      this.formData = {
        id: null,
        title: ''
      }
    },

    // 删除
    handleDelete(row) {
      this.$confirm(`确定要删除"${row.title}"吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        try {
          await deleteApplePage({ id: row.id })
          this.$message.success('删除成功')
          this.fetchList()
        } catch (error) {
          console.error('删除失败:', error)
          this.$message.error('删除失败')
        }
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;

  .page-header {
    margin-bottom: 20px;

    h2 {
      margin: 0 0 8px 0;
      font-size: 24px;
      font-weight: 500;
      color: #303133;
    }

    p {
      margin: 0;
      font-size: 14px;
      color: #909399;
    }
  }

  .content-area {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 16px;
      font-weight: 500;
    }
  }
}

::v-deep .el-table {
  .el-button + .el-button {
    margin-left: 8px;
  }
}
</style>
